<template>
  <view class="container">
    <view class="header">
      <view class="search-box">
        <image src="/static/搜索.png" class="search-icon"></image>
        <input 
          type="text" 
          placeholder="搜索攻略" 
          confirm-type="search" 
          focus
          v-model="searchText" 
          @confirm="searchGuides"
          @input="searchGuides"
        />
        <text class="cancel-btn" @tap="goBack">取消</text>
      </view>
    </view>
    
    <!-- 搜索结果 -->
    <view class="search-results" v-if="searchResults.length > 0">
      <view 
        class="guide-item" 
        v-for="(item, index) in searchResults" 
        :key="item.id" 
        @tap="navigateToDetail(item.id)"
      >
        <image class="guide-image" :src="item.coverImage || item.cover" mode="aspectFill"></image>
        <view class="guide-info">
          <text class="guide-title">{{item.title}}</text>
          <view class="guide-meta">
            <image class="author-avatar" :src="item.authorAvatar" mode="aspectFill"></image>
            <text class="author-name">{{item.authorName}}</text>
            <text class="like-count">{{item.likeCount}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-else-if="searched && !isLoading">
      <text class="empty-text">未找到相关攻略</text>
    </view>
    
    <!-- 加载状态 -->
    <view class="loading-state" v-if="isLoading">
      <text class="loading-text">正在搜索...</text>
    </view>
    
    <!-- 热门搜索 -->
    <view class="hot-searches" v-if="!searchText && !searched">
      <text class="section-title">热门搜索</text>
      <view class="keywords">
        <text 
          class="keyword-item" 
          v-for="(item, index) in hotKeywords" 
          :key="index"
          @tap="quickSearch(item)"
        >{{item}}</text>
      </view>
    </view>
  </view>
</template>

<script>
// 导入模糊搜索工具
import searchUtils from '../../utils/search.js';

// 静态攻略数据
const staticGuides = [
  {
    id: 1,
    title: '🔥玩沙扒湾(三天行)——很全攻略',
    cover: '/static/图片.jpg',
    coverImage: '/static/图片.jpg',
    authorName: 'sanseafish晓',
    authorAvatar: '/static/logo.png',
    likeCount: 33,
    type: '全部攻略',
    content: '沙扒湾是广东省阳江市阳西县南部一个小渔村，到处是静谧的渔港，是摄影爱好者的天堂。这里山清水秀，空气清新，幽静美丽，气候宜人，四季如春，是度假、疗养和旅游的绝佳去处。'
  },
  {
    id: 2,
    title: '值得收藏！沙扒湾最好吃美食TOP5——这是完美攻略',
    cover: '/static/图片.jpg',
    coverImage: '/static/图片.jpg',
    authorName: 'sanseafish晓',
    authorAvatar: '/static/logo.png',
    likeCount: 55,
    type: '美食',
    content: '沙扒湾的海鲜非常新鲜，强烈推荐阿强海鲜大排档，这里的螃蟹和生蚝特别新鲜，价格也不贵。另外，沙扒湾的烧烤也非常有特色，海岸线烧烤屋的烤生蚝、烤鱿鱼都是必点美食。'
  },
  {
    id: 3,
    title: '如果你半夜去沙扒湾的——定会吃到好吃',
    cover: '/static/图片.jpg',
    coverImage: '/static/图片.jpg',
    authorName: '旅游家沙爸的心',
    authorAvatar: '/static/logo.png',
    likeCount: 45,
    type: '美食',
    content: '夜晚的沙扒湾别有一番风味，特别是沙滩BBQ炭烤，在海边吹着海风，听着浪声，吃着美味的烧烤，喝着啤酒，绝对是人生一大享受。'
  },
  {
    id: 4,
    title: '可以去这些沙滩玩耍!',
    cover: '/static/图片.jpg',
    coverImage: '/static/图片.jpg',
    authorName: 'sanseafish晓',
    authorAvatar: '/static/logo.png',
    likeCount: 55,
    type: '沙滩',
    content: '沙扒湾有很多美丽的沙滩，非常适合放松和玩耍。沙扒湾沙滩细软洁白，海水湛蓝清澈，是游泳、冲浪、玩水的好地方。黄昏时分还可以欣赏到美丽的日落景色。'
  },
  {
    id: 5,
    title: '值得收藏！沙扒湾最好吃美食TOP5——这是完美攻略',
    cover: '/static/图片.jpg',
    coverImage: '/static/图片.jpg',
    authorName: 'sanseafish晓',
    authorAvatar: '/static/logo.png',
    likeCount: 55,
    type: '出片景点',
    content: '沙扒湾有许多适合拍照的景点，如海陵岛、沙扒湾海滩等。尤其是黄昏时分的沙扒湾海滩，落日余晖洒在金色的沙滩上，是拍摄绝美照片的好时机。'
  },
  {
    id: 6,
    title: '沙扒湾点一览',
    cover: '/static/图片.jpg',
    coverImage: '/static/图片.jpg',
    authorName: 'sanseafish晓',
    authorAvatar: '/static/logo.png',
    likeCount: 55,
    type: '旅拍地点',
    content: '沙扒湾有很多适合拍照的景点，比如沙扒湾海滩、闸坡海陵岛、沙扒湾渔村等。这些地方景色优美，非常适合拍摄美丽的照片，留下美好的回忆。'
  }
];

export default {
  data() {
    return {
      searchText: '',
      searched: false,
      isLoading: false,
      searchResults: [],
      hotKeywords: ['沙扒湾三日游', '海鲜', '沙滩', '日落', '美食攻略']
    }
  },
  methods: {
    // 搜索攻略
    searchGuides() {
      if (!this.searchText.trim()) {
        this.searchResults = [];
        this.searched = false;
        return;
      }
      
      this.isLoading = true;
      this.searched = true;
      
      // 为了模拟真实的搜索效果，这里使用setTimeout
      setTimeout(() => {
        // 使用模糊搜索
        this.searchResults = searchUtils.fuzzySearch(
          staticGuides,
          this.searchText,
          ['title', 'content', 'type', 'authorName']
        );
        
        this.isLoading = false;
      }, 300);
    },
    
    // 快速搜索
    quickSearch(keyword) {
      this.searchText = keyword;
      this.searchGuides();
    },
    
    // 跳转到攻略详情
    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/guide/detail?id=${id}`
      });
    },
    
    // 返回
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.header {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.search-box {
  display: flex;
  align-items: center;
}

.search-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.search-box input {
  flex: 1;
  height: 70rpx;
  font-size: 28rpx;
  background-color: #f5f5f5;
  border-radius: 35rpx;
  padding: 0 30rpx;
}

.cancel-btn {
  font-size: 28rpx;
  color: #999;
  margin-left: 20rpx;
  padding: 10rpx;
}

.search-results {
  padding: 20rpx 30rpx;
}

.guide-item {
  display: flex;
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.guide-image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.guide-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.guide-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  line-height: 1.4;
}

.guide-meta {
  display: flex;
  align-items: center;
}

.author-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.author-name {
  font-size: 24rpx;
  color: #666;
  margin-right: 20rpx;
}

.like-count {
  font-size: 24rpx;
  color: #999;
}

.empty-state, .loading-state {
  padding: 100rpx 0;
  text-align: center;
}

.empty-text, .loading-text {
  font-size: 28rpx;
  color: #999;
}

.hot-searches {
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.keywords {
  display: flex;
  flex-wrap: wrap;
}

.keyword-item {
  font-size: 26rpx;
  color: #666;
  background-color: #fff;
  padding: 15rpx 30rpx;
  border-radius: 30rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}
</style> 